<template>
	<view class="tpl-card cards">
		<juhe-navbar :options="navbarData"></juhe-navbar>
		<juhe-all></juhe-all>
		
		<view class="cards-box">
			<view
				class="card"
			>
				<view class="name">无限卡会员</view>
				<view class="money-box">
					<view class="money">9999</view>
					<view class="name">Username</view>
				</view>
				<view class="infos">
					<view></view>
					<view class="number">2019-02-11到期</view>
				</view>
			</view>
			
			<view class="btn">
				续费无线卡会员
			</view>
		</view>
		
		
		<view class="ul with-have-no-mt">
			<view class="title-box"><view class="title">无限卡权益</view></view>
			<view class="li-box with-have-no-click-bg" v-for="one of 5">
				<view class="li">
					<view class="name">Duang</view>
					<view class="li-after">Duang</view>
					<view class="more iconfont">&#xe856;</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import JuheNavbar from '../../components/juhe-navbar.vue';
export default {
	components: {
		JuheNavbar
	},
	data() {
		return {
			navbarData: {
				leftIcons: [
					{
						icon: 'icon-arrowleft'
					}
				],
				rightIcons: [],
				tabs: {
					list: [
						{
							text: '无限卡会员'
						}
					]
				}
			}
		};
	}
};
</script>

<style lang="scss" scoped="">
.tpl-card {
	margin-top: 100upx;
	padding: 20upx 0;
	padding-top: var(--status-bar-height);
	margin-top: 100upx;
	padding: 20upx 0;
	padding-top: var(--status-bar-height);
	
	.cards-box {
		padding: 20upx 0;
		background-color: #fff;
	}
	.btn{
		text-align: center;
		font-size: $uni-font-size-base;
		height: 70upx;
		line-height: 70upx;
		background: rgb(255,220,0);
		box-shadow: 0 10upx 20upx rgba(255,220,0, 0.2);
		margin: 20upx;

	}
	.card {
		text-align: left;
		border-radius: 30upx;
		margin:0 20upx;
		margin-bottom: 20upx;
		padding: 20upx 24upx;
		color: #fff;
		box-shadow: 4upx 10upx 40upx rgba(0, 0, 0, 0.1);
		background-size: 100% 100%;
		background-position: center center;
		height: 340upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 20upx;
		background-color: #fff;
		background-image: url('../../static/image/card_bg.jpg');
		> image {
			border-radius: 10upx;
			box-shadow: 4upx 10upx 20upx #eee;
		}
		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.logo {
				width: 100upx;
			}

			.number {
				text-align: right;
				font-size: 20upx;

				&::before {
					content: 'NO.';
				}
			}
		}

		&:active {
			transform: scale(1.01);
		}

		.name {
			font-size: 20upx;
		}

		.money-box {
			text-align: center;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 15px 0;

			.money {
				text-align: center;
				font-size: 50px;
				font-family: numberFont;
			}

			.text {
				text-align: center;
				font-size: 50px;
				font-family: numberFont;

				&::before {
					// content: '　';
					font-size: 10px;
					margin-right: 4px;
				}

				span {
					font-size: 10px;
					// margin-left: 4px;
				}
			}

			.name {
				font-size: 10px;
			}
		}

		.infos {
			width: 100%;
			display: flex;
			font-size: 10px;
			align-items: center;
			justify-content: space-between;
		}
	}
}
</style>
